<template>
  <div class="center-container f-r-cfs">
    <div class="center-wrap">
      <el-breadcrumb :separator-icon="ArrowRight" class="custom-breadcrumb" v-if="localStore.innerWidth > 768">
        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="common-title-m f-r-dc" v-if="is_center && localStore.innerWidth <= 768">
        个人中心
      </div>

      <div class="center-content f-r" v-if="is_center">
        <div class="content-sidebar">
          <div class="sidebar-item f-r-dc cursor" v-for="(item,index) in sidebar_list" :key="index" @click="sidebarChange(index)">
            <svg-icon
              :name="item.icon_name"
              prefix="icon-personal-center"
              :width="16"
              :className="current_active == index && localStore.innerWidth > 768 ? 'svg-2785FF' : 'svg-7285A0'"
              :height="16"
            ></svg-icon>
            <span class="sidebar-item-text" :class="current_active == index && localStore.innerWidth > 768 ? 'active' : ''">{{ item.text }}</span>
            <el-icon :size="16" color="#8394AC" class="sidebar-item-right-arrow" v-if="localStore.innerWidth <= 768"><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="logout-btn f-r-cc cursor" v-if="localStore.innerWidth <= 768" @click="logOut">退出登录</div>
        <div class="content-desc" v-if="localStore.innerWidth > 768">
          <div class="common-desc-title">{{ current_name }}</div>
          <account-management v-if="current_active == 0"></account-management>
          <personal-information v-if="current_active == 1"></personal-information>
          <registration-record v-if="current_active == 2"></registration-record>
        </div>
      </div>

      <!-- 移动 -->
      <template v-else>
        <account-management v-if="current_active == 0" @back="is_center = true"></account-management>
        <personal-information v-if="current_active == 1" @back="is_center = true"></personal-information>
        <registration-record v-if="current_active == 2" @back="is_center = true"></registration-record>
      </template>

    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import AccountManagement from '@/views/personal-center/component/account-management/index.vue'
import personalInformation from '@/views/personal-center/component/personal-information/index.vue'
import RegistrationRecord from '@/views/personal-center/component/registration-record/index.vue'
import { useLocal } from '@/stores/local'
import { useUser } from '@/stores/user'
const user_store = useUser()
const localStore = useLocal()

const router = useRouter()

const current_active = ref(0)

const is_center = ref(true)

const current_name = ref('账号与密码')

const sidebar_list = ref([
  {
    icon_name: 'account-and-password',
    text: '账号与密码',
    mobile_name: 'AccountManagement'
  },
  {
    icon_name: 'personal-information',
    text: '个人信息',
    mobile_name: 'AccountManagement'
  },
  {
    icon_name: 'registration-record',
    text: '入驻记录',
    mobile_name: 'AccountManagement'
  },
  {
    icon_name: 'merchant-platform',
    text: '登录商家端'
  }
])

function logOut () {
  // 退出登录
  user_store.logOut()
  router.push({
    name: 'Login'
  })
}

watch(() => localStore.innerWidth, (new_) => {
  if (new_ > 768) {
    is_center.value = true
  }
})

function sidebarChange (index) {
  if (index == 3) {
    // 商户端
    window.open('https://mall.mdd3.cn/merchant', '_blank');
  } else {
    current_active.value = index
    current_name.value = sidebar_list.value[index].text
    if (localStore.innerWidth <= 768) {
      // router.push({
      //   name: sidebar_list.value[index].mobile_name
      // })
      is_center.value = false
    }
  }
}

</script>
<style scoped lang="less">
@import './index.less';
@media screen and (max-width: 768px) {
  @import './mobile/index.less';
}
</style>
